ফ্লেক্সবক্স হচ্ছে সিএসএস(৩) এর নতুন লেআউট। পেজ লেআউট যখন বিভিন্ন সাইজের স্ক্রিন এবং বিভিন্ন ডিভাইসে প্রদর্শিত হবে তখন এলিমেন্ট গুলোকে পূর্ব নির্ধারিত নকশা অনুযায়ী প্রদর্শন করানোর জন্য সিএসএস(৩) ফ্লেক্সবক্স ব্যবহার করা হয়।
ফ্লেক্স কন্টেইনার এবং ফ্লেক্স কন্টেন্ট নিয়ে গঠিত হয় ফ্লেক্সবক্স। একটি কন্টেইনারকে ফ্লেক্সে রূপান্তর করতে উক্ত এলিমেন্টের display প্রোপার্টিতে ভ্যালু হিসেবে flex অথবা inline-flex সেট করতে হয়।
একটি ফ্লেক্স কন্টেইনারের মধ্যে এক বা একাধিক ফ্লেক্স কন্টেন্ট থাকতে পারে। ফ্লেক্স কন্টেন্ট ফ্লেক্স কন্টেইনারের ভিতরে লাইনে অবস্থান করে। ডিফল্ট ভাবে প্রতিটি ফ্লেক্স কনটেইনারে একটি করে লাইন থাকে।
নিম্নের উদাহরণে তিনটি ফ্লেক্স কন্টেন্ট দেখানো হল যেগুলোকে ডিফল্ট ভাবে অনুভূমিক আকারে লাইনে অর্থাৎ বাম থেকে ডান দিকে সাজবেঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
display: -webkit-flex;
display: flex;
width: 400px;
height: 200px;
background-color: grey;
}
.flex-box {
background-color: yellowgreen;
width: 80px;
height: 80px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-items">
<div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>
</body>
</html>
আমরা direction প্রোপার্টি ব্যবহার করে ফ্লেক্সবক্সেরে গতিপথ পরিবর্তন করতে পারি। এখন আমরা যদি < /body> ট্যাগে direction প্রোপার্টির মান rtl সেট করি সেক্ষেত্রে ফ্লেক্সবক্সেরে গতিপথের সাথে সাথে সম্পূর্ণ পেজের লেআউটও পরিবর্তন হয়ে যাবে।
নিম্নের উদাহরণে দেখবো কিভাবে ফ্লেক্স এলিমেন্টের গতিপথ ডান থেকে বামে হয়ঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
body {
direction: rtl;
}
.flex-items {
display: -webkit-flex;
display: flex;
width: 400px;
height: 200px;
background-color: grey;
}
.flex-box {
background-color: yellowgreen;
width: 80px;
height: 80px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-items">
<div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>
</body>
</html>
ফ্লেক্স কন্টেইনারের মধ্যে ফ্লেক্স এলিমেন্ট গুলোর গতিপথ flex-direction প্রোপার্টি দ্বারা করে। আমরা flex-direction প্রোপার্টি ব্যবহার করে ফ্লেক্স এলিমেন্ট গতিপথ পরিবর্তন করতে পারি। নিম্নের এতে ব্যবহৃত ভ্যালু গুলো দেওয়া হলোঃ
row - টেক্সটের গতিমুখ যদি উপর থেকে নিচে হয় তবে ফ্লেক্সবক্সের গতিমুখ হবে বাম থেকে ডানে। এটি ডিফল্ট ভ্যালু।row-reverse - টেক্সটের গতিমুখ যদি বাম থেকে ডানে হয় তবে ফ্লেক্সবক্সের গতিমুখ হবে ডান থেকে বামে।column - টেক্সট যদি অনুভূমিক হয় তবে ফ্লেক্স হবে উলম্ব।column-reverse - এটি column এর বিপরীত কাজ করে।নিম্নের উদাহরণে আমরা row-reverse এর ব্যবহার দেখবোঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
width: 400px;
height: 200px;
background-color: grey;
}
.flex-box {
background-color: yellowgreen;
width: 80px;
height: 80px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-items">
<div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>
</body>
</html>
নিম্নের উদাহরণে আমরা column এর ব্যবহার দেখবোঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
width: 400px;
height: 380px;
background-color: grey;
}
.flex-box {
background-color: yellowgreen;
width: 80px;
height: 80px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-items">
<div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>
</body>
</html>
নিম্নের উদাহরণে আমরা column-reverse এর ব্যবহার দেখবোঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
width: 400px;
height: 380px;
background-color: grey;
}
.flex-box {
background-color: yellowgreen;
width: 80px;
height: 80px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-items">
<div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>
</body>
</html>
আপনি justify-content প্রোপার্টি ব্যবহার করে একটি ফ্লেক্সিবল কন্টেইনারের সকল কন্টেন্ট গুলোকে অনুভূমিক ভাবে সাজাতে পারবেন।
justify-content এর সম্ভাব্য ভ্যালু গুলো নিচে দেওয়া হলোঃ
flex-start - ডিফল্টভাবে কন্টেন্ট গুলো কন্টেইনারের শুরুতে অবস্থান করেflex-end - কন্টেন্টগুলো কন্টেইনারের শেষে অবস্থান করেcenter - কন্টেন্টগুলো কন্টেইনারের কেন্দ্রে অবস্থান করেspace-between -কন্টেন্ট গুলো নিজেদের মধ্যে দূরত্ব বঝায় রেখে অবস্থান করেspace-around - কন্টেন্ট গুলো নিজেদের চারপাশে দূরত্ব বঝায় রেখে অবস্থান করেনিম্নের উদাহরণে আমরা flex-end এর ব্যবহার দেখবোঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-end;
justify-content: flex-end;
width: 400px;
height: 200px;
background-color: grey;
}
.flex-box {
background-color: yellowgreen;
width: 80px;
height: 80px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-items">
<div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>
</body>
</html>
নিম্নের উদাহরণে আমরা center এর ব্যবহার দেখবোঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
width: 400px;
height: 200px;
background-color: grey;
}
.flex-box {
background-color: yellowgreen;
width: 80px;
height: 80px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-items">
<div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>
</body>
</html>
নিম্নের উদাহরণে আমরা space-between এর ব্যবহার দেখবোঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
width: 400px;
height: 200px;
background-color: grey;
}
.flex-box {
background-color: yellowgreen;
width: 80px;
height: 80px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-items">
<div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>
</body>
</html>
নিম্নের উদাহরণে আমরা space-around এর ব্যবহার দেখবোঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content: space-around;
width: 400px;
height: 200px;
background-color: grey;
}
.flex-box {
background-color: yellowgreen;
width: 80px;
height: 80px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-items">
<div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>
</body>
</html>
আপনি align-items প্রোপার্টি ব্যবহার করে একটি ফ্লেক্সিবল কন্টেইনারের সকল কন্টেন্ট গুলোকে উলম্ব ভাবে সাজাতে পারবেন।
align-items এর সম্ভাব্য ভ্যালু গুলো নিচে দেওয়া হলোঃ
stretch - ডিফল্ট ভাবে কন্টেন্টগুলো সম্পূর্ন কন্টেইনার জুড়ে থাকে।flex-start - কন্টেন্ট গুলো কন্টেইনারের উপরে অবস্থান করে।flex-end - কন্টেন্ট গুলো কন্টেইনারের নিচে অবস্থান করে।center - কন্টেন্ট গুলো কন্টেইনারের কেন্দ্রে উলম্বভাবে অবস্থান করে।baseline - কন্টেন্টগুলো কন্টেইনারের বেসলাইনে অবস্থান করে।নিম্নের উদাহরণে আমরা stretch এর ব্যবহার দেখবোঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
width: 400px;
height: 200px;
background-color: grey;
}
.flex-box {
background-color: yellowgreen;
width: 80px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-items">
<div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>
</body>
</html>
নিম্নের উদাহরণে আমরা flex-start এর ব্যবহার দেখবোঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-start;
align-items: flex-start;
width: 400px;
height: 200px;
background-color: grey;
}
.flex-box {
background-color: yellowgreen;
width: 80px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-items">
<div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>
</body>
</html>
নিম্নের উদাহরণে আমরা flex-end এর ব্যবহার দেখবোঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-end;
align-items: flex-end;
width: 400px;
height: 200px;
background-color: grey;
}
.flex-box {
background-color: yellowgreen;
width: 80px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-items">
<div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>
</body>
</html>
নিম্নের উদাহরণে আমরা center এর ব্যবহার দেখবোঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
width: 400px;
height: 200px;
background-color: grey;
}
.flex-box {
background-color: yellowgreen;
width: 80px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-items">
<div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>
</body>
</html>
নিম্নের উদাহরণে আমরা baseline এর ব্যবহার দেখবোঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
display: -webkit-flex;
display: flex;
-webkit-align-items: baseline;
align-items: baseline;
width: 400px;
height: 200px;
background-color: grey;
}
.flex-box {
background-color: yellowgreen;
width: 80px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-items">
<div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>
</body>
</html>
আপনি flex-wrap প্রোপার্টি ব্যবহার করে একটি ফ্লেক্সিবল কন্টেইনারের কন্টেন্ট গুলো wrap হবে কিনা তা নির্দেশ করতে পারেন।
flex-wrap এর সম্ভাব্য ভ্যালু গুলো নিচে দেওয়া হলোঃ
nowrap - ডিফল্টভাবে ফ্লেক্স কন্টেন্ট গুলো wrap করা থাকে না।wrap - যখন প্রয়োজন তখন ফ্লেক্স কন্টেন্ট গুলো wrap করে।wrap-reverse - যখন প্রয়োজন তখন ফ্লেক্স কন্টেন্ট গুলোকে বিপরিত দিক থেকে wrap করে।নিম্নের উদাহরণে আমরা nowrap এর ব্যবহার দেখবোঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
width: 230px;
height: 200px;
background-color: grey;
}
.flex-box {
background-color: yellowgreen;
width: 80px;
height: 80px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-items">
<div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>
</body>
</html>
নিম্নের উদাহরণে আমরা wrap এর ব্যবহার দেখবোঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 230px;
height: 200px;
background-color: grey;
}
.flex-box {
background-color: yellowgreen;
width: 80px;
height: 80px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-items">
<div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>
</body>
</html>
নিম্নের উদাহরণে আমরা wrap-reverse এর ব্যবহার দেখবোঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 230px;
height: 200px;
background-color: grey;
}
.flex-box {
background-color: yellowgreen;
width: 80px;
height: 80px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-items">
<div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>
</body>
</html>
আপনি align-content প্রোপার্টি ব্যবহার করে flex-wrap প্রোপার্টিকে মোডিফাই করতে পারেন। align-content প্রোপার্টি অনেকটা align-items প্রোপার্টির মত কাজ করে। তবে এক্ষেত্রে এটি ফ্লেক্স কন্টেন্টের পরিবর্তে ফ্লেক্স লাইনকে সাজায়।
align-content এর সম্ভাব্য ভ্যালু গুলো নিচে দেওয়া হলোঃ
stretch - ডিফল্টভাবে লাইন গুলো কন্টেইনারের খালি অংশ জুড়ে থাকে।flex-start - লাইন গুলো কন্টেইনারের শুরুতে থাকে।flex-end - লাইন গুলো কন্টেইনারের শেষে থাকে।center - লাইন গুলো কন্টেইনারের কেন্দ্রে থাকে।space-between - কন্টেইনারের লাইন গুলো জোড়া জোড়া করে থাকে।নিম্নের উদাহরণে আমরা center এর ব্যবহার দেখবোঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: center;
align-content: center;
width: 230px;
height: 200px;
background-color: grey;
}
.flex-box {
background-color: yellowgreen;
width: 80px;
height: 80px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-items">
<div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>
</body>
</html>
আপনি order প্রোপার্টি ব্যবহার করে কন্টেইনারের ভিতর ফ্লেক্স কন্টেন্ট গুলোর অবস্থান পরিবর্তন করতে পারেনঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
display: -webkit-flex;
display: flex;
width: 400px;
height: 200px;
background-color: grey;
}
.flex-box {
background-color: yellowgreen;
width: 80px;
height: 80px;
margin: 10px;
}
.third{
-webkit-order: -1;
order: -1;
}
</style>
</head>
<body>
<div class="flex-items">
<div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
<div class="flex-box third">ফ্লেক্স কন্টেন্ট ৩</div>
</div>
</body>
</html>
আপনি margin: auto; সেট করে অতিরিক্ত জায়গা নেওয়ার মাধ্যমে কন্টেইনারের ভিতর ফ্লেক্স কন্টেন্ট গুলোর অবস্থান পরিবর্তন করতে পারেনঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
display: -webkit-flex;
display: flex;
width: 400px;
height: 200px;
background-color: grey;
}
.flex-box {
background-color: yellowgreen;
width: 80px;
height: 80px;
margin: 10px;
}
.flex-box:nth-child(2){
margin: auto;
}
</style>
</head>
<body>
<div class="flex-items">
<div class="flex-box">ফ্লেক্স কন্টেন্ট ১</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ২</div>
<div class="flex-box">ফ্লেক্স কন্টেন্ট ৩</div>
</div>
</body>
</html>
আপনি margin: auto; ব্যবহার করে কন্টেইনারের ভিতর ফ্লেক্স কন্টেন্টকে যথাযথভাবে কেন্দ্রে অবস্থান করাতে পারেনঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
display: -webkit-flex;
display: flex;
width: 400px;
height: 200px;
background-color: grey;
}
.flex-box {
background-color: yellowgreen;
width: 80px;
height: 80px;
margin: auto;
}
</style>
</head>
<body>
<div class="flex-items">
<div class="flex-box">মাঝে আনার পদ্ধতি</div>
</div>
</body>
</html>
আপনি flex প্রোপার্টি ব্যবহার করে কন্টেইনারের ভিতর ফ্লেক্স কন্টেন্ট গুলোর দৈঘ্য এবং প্রস্থ পরিবর্তন করতে পারেনঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
.flex-items {
display: -webkit-flex;
display: flex;
width: 400px;
height: 200px;
background-color: grey;
}
.flex-box {
background-color: yellowgreen;
margin:8px;
}
.first {
-webkit-flex: 1;
flex: 1;
}
.second {
-webkit-flex: 2;
flex: 2;
}
.third {
-webkit-flex: 1;
flex: 1;
}
</style>
</head>
<body>
<div class="flex-items">
<div class="flex-box first">ফ্লেক্স কন্টেন্ট ১</div>
<div class="flex-box second">ফ্লেক্স কন্টেন্ট ২</div>
<div class="flex-box third">ফ্লেক্স কন্টেন্ট ৩</div>
</div>
</body>
</html>
common.read_more
common.or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
